<template>
  <div class="flex flex-col min-h-screen bg-weather-primary">
    <header class="bg-weather-primary shadow-lg sticky top-0 z-10">
      <nav class="container flex flex-col sm:flex-row items-center gap-4 text-white py-6">
        <a href="/weather" class=""
          ><div class="flex items-center gap-3">
            <i class="fa-solid fa-sun text-2xl"></i>
            <p class="text-2xl">新中地天气</p>
          </div></a
        >
        <div class="flex gap-4 items-center" v-if="livesWeather.lives">
          <h4 class="text-lg">{{ livesWeather.lives[0].city }}</h4>
          <span class="text-sm"
            >实时天气：{{ livesWeather.lives[0].weather }}
            {{ livesWeather.lives[0].temperature }}°C</span
          ><span class="text-sm"
            >{{ livesWeather.lives[0].winddirection }}风{{ livesWeather.lives[0].windpower }}级</span
          >
        </div>
        <div class="flex gap-3 flex-1 justify-end">
          <i
            class="fa-solid fa-circle-info text-xl hover:text-weather-secondary cursor-pointer duration-1000"
          ></i
          ><i
          @click="handleAddCity"
           ref="plus"
            class="fa-solid fa-plus text-xl hover:text-weather-secondary duration-150 cursor-pointer"
          ></i>
        </div>
      </nav>
    </header>
    <div class="flex flex-col text-white">
      <div class="p-2 text-center bg-weather-secondary">
        你正在预览{{ route.query.search }}的天气信息<span ref="span">，可以通过右上角的"+"号按钮保存起来</span>
      </div>
      <div  class="container flex flex-col text-center mt-6 gap-4" v-if="weather.length > 0"  >
        <h1>当日气温是：{{ weather[0].temperature }}摄氏度</h1>
        <h1>当日天气是：{{ weather[0].weather }}</h1>
        <h1>当日风向是：{{ weather[0].winddirection }}风</h1>
        <h1>当日风力是：{{ weather[0].windpower }}级</h1>
      </div>
      <hr class="border-white border-opacity-10 mt-6" />
      <div class="moreweather container">
        <div class="bg-weather-secondary px-12 pt-10 mt-2 rounded">
          <div class="flex gap-6">
            <template v-for="(item, index) in forecastArr1" :key="index">
              <div class="flex flex-col flex-1 text-center gap-4" v-if="forecastArr1.length > 0">
                <span>{{ item.day }}</span
                ><span>{{ item.date }}</span
                ><span>{{ item.dayweather }}</span
                ><span>风力{{ item.daypower }}级</span>
              </div></template
            >
          </div>
          <div
            class="weathercanvas h-40 mt-10"
            _echarts_instance_="ec_1720058117283"
            style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0)"
          >
            <div
              style="
                position: relative;
                width: 1103px;
                height: 160px;
                padding: 0px;
                margin: 0px;
                border-width: 0px;
              "
            >
              <v-chart :option="options2"
                />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="fixed z-20 w-full bg-black bg-opacity-30 h-screen top-0 left-0 flex justify-center px-8 text-black"
    style="display: none"
  >
    <div class="p-4 bg-white self-start mt-32 max-w-screen-md">
      <h2>关于:</h2>
      <p class="text-xs mb-4">这个应用可以用来追踪你选择城市的当前天气</p>
      <h2>如何使用:</h2>
      <p class="text-xs mb-4">
        1.点击搜索框输入你希望追踪的城市<br />
        2.在搜索结果中选中一个城市，你将获取当地最新的天气<br />
        3.点击右侧的＋号可以将追踪城市的天气情况保存在首页
      </p>
      <h2>移除城市:</h2>
      <p class="text-xs">如果你不想在首页关注某个城市,可以通过底部的按钮删<br />除它</p>
      <button class="text-white mt-8 bg-weather-primary py-2 px-6 text-xs">关闭</button>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useWeatherStore } from '@/stores/index'
import { useRoute } from 'vue-router'
import { getWeatherByAdcode } from '@/api/index'
import { ref, onMounted,watch } from 'vue'
const route = useRoute()
console.log(route, 'route')
const { getForecastArr1,renderchart1,AddCity,getCity } = useWeatherStore()
const { livesWeather, forecastArr1, options2,citys, } = storeToRefs(useWeatherStore())
const weather = ref([]) //存放当天天气信息
const plus=ref(null)
const span=ref(null)
//处理添加城市
const handleAddCity=()=>{
    AddCity(route.params.code)
    getCity()
    citys.value.forEach(item=>{
        if(item===route.params.code){
            plus.value.style.display='none'
            span.value.style.display='none'
        }
    })
  //  console.log(citys.value,'res')
}



watch(
    citys,
    ()=>{
        localStorage.setItem('cityList',JSON.stringify(citys.value))//JSON.stringify(citys.value)将citys.value转换为字符串
    },
    { deep: true }
)
onMounted(async () => {
  //获取当天天气情况
  const { data } = await getWeatherByAdcode(route.params.code, 'base')
  weather.value = data.lives
  //获取天气预报
  await getForecastArr1(route.params.code)
//   console.log(forecastArr1.value, 'forecastArr1')
  //渲染第二个页面的图表
  await renderchart1(route.params.code)
  console.log()
  
})
</script>

<style scoped></style>
